<div bsModal #actionModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModal"
    aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">

                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>材料入库</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body" style="padding-top: 0;">
                    <div class="into-step">
                        <p-steps [model]="items" [activeIndex]="activeIndex" styleClass="steps-custom"></p-steps>
                    </div>

                    <div [hidden]="activeIndex === 1">
                        <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
                            <div class="m-demo__preview text-center">
                                <div class="row">
                                    <div class="col-md-3">
                                        <small class='text-muted'>物资名称</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.invname}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>图号</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Th}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>任务号</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Rwh}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>合格证</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.hgz_No}}</h6>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-3">
                                        <small class='text-muted'>炉批号</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.invfurbatch}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>质检单号</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.hgz_Zjdbillno}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>牌号</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.invxhcpdh}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>规格</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.invscale}}</h6>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-3">
                                        <small class='text-muted'>尺寸</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Cc}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <!-- <small class='text-muted'>专用状态</small>
                    <h6 style='margin-top: 10px;'>{{bills.outStockBill.zhuanYongStatus}}</h6> -->
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>描述</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Wzms}}</h6>
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 15px;">
                                    <div class="col-md-3">
                                        <small class='text-muted'>数量</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.realitemnum}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>总价</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Money}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>重量</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.realnum}}</h6>
                                    </div>
                                    <div class="col-md-3">
                                        <small class='text-muted'>单价</small>
                                        <h6 style='margin-top: 10px;'>{{bills.outStockBill.jc_Price}}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
                            <div class="m-demo__preview text-center">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>签收数量</label>
                                            <input class="form-control text-center" type="number"
                                                name="bills.materialForProductSign.itemAmount"
                                                [ngClass]="{'edited': bills.materialForProductSign.itemAmount}"
                                                [(ngModel)]="bills.materialForProductSign.itemAmount">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                            <label>车间备注</label>
                                            <input class="form-control text-center"
                                                name="bills.materialForProductSign.workshopRemark"
                                                [ngClass]="{'edited': bills.materialForProductSign.workshopRemark}"
                                                [(ngModel)]="bills.materialForProductSign.workshopRemark">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div [hidden]="activeIndex === 0">
                        <!-- <p-treeTable [value]="areas" selectionMode="single" [(selection)]="area" dataKey="displayName">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 150px;">位置</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                                <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                                    <td>
                                        <p-treeTableToggler [rowNode]="rowNode" style="color: #5867dd;">
                                        </p-treeTableToggler>
                                        {{ rowData.displayName }}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-treeTable> -->
                        <selectLocation [(location)]="positionId"></selectLocation>
                    </div>

                    <div class="row">
                        <div class="btn-group btn-group btn-group-justified" style="margin: auto;">
                            <button class="btn m-btn--pill m-btn--air btn-warning" [disabled]="activeIndex === 0"
                                (click)="activeIndex = 0">上一步</button>
                            <button class="btn m-btn--pill m-btn--air btn-warning" [disabled]="activeIndex === 1"
                                (click)="onNextBtnClick()">下一步</button>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default"
                        (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-success" [disabled]="!positionId || !activeIndex"
                        [buttonBusy]="saving" [busyText]="'投产中...'">
                        <i class="fa fa-check-circle"></i>
                        <span>入库</span>
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
